<template>
	<view class="container">
		<view v-for="(item,index) in dataList" :key="item.id" class="item-cls">
			<view class="item-left-cls">
				<uni-tooltip :content="item.name">
					<view class="name-cls ellipsis">
						<view style="color:green">【选项{{item.voteOption}}】</view>
						<view> {{item.name}}</view>
					</view>
				</uni-tooltip>
				<view class="number-cls">[{{item.number}}]票</view>
			</view>
			<view class="item-right-cls">
				<button
					@click="useRouter('/pages/viewItemDetails/viewItemDetails?vId='+item.voteId+'&itemId='+item.id+'&index='+(index+1))"
					type="primary" size="mini">查看明细</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useRouter
	} from '@/utils/index.js'
	import {
		listDetailItems
	} from '@/api/vote.js'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";

	const dataList = ref([])
	onLoad(opitons => {
		console.log('opitons', opitons)
		init(opitons.id)
	})
	const init = async (id) => {
		const result = await listDetailItems(id)
		console.log(result);
		dataList.value = result.list;
	}
</script>

<style lang="less" scoped>
	.item-cls {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 25px;
		border-radius: 10px;
		margin-bottom: 20rpx;

		.item-left-cls {
			display: flex;
			flex-direction: column;

			.name-cls {
				font-weight: bolder;
				width: 200px;
				display: flex;
			}

			.number-cls {
				margin-top: 20rpx;
				color: #75aeed;
			}
		}
	}
</style>